<template>
	<div class="containers">
		<div class="container">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-add mr10" @click="addregion"
					size="mini">添加</el-button>
				<el-select v-model="freight" @change="getData" placeholder="请选择二级分类" size="mini" class="mr10">
					<el-option v-for="(item, index) in options" :key="item.ID" :label="item.name"
						:value="item.ID"></el-option>
				</el-select>
			</div>

			<el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header"
				@selection-change="handleSelectionChange" v-loading="loading" :height="$tableHight" border size="mini">
				<el-table-column type="index" :label="'序号'" width="55" align="center"></el-table-column>

				<el-table-column prop="province" label="模版名称"></el-table-column>
				<el-table-column prop="number" label="数量"></el-table-column>
				<el-table-column prop="money" label="运费"></el-table-column>
				<el-table-column prop="far_money" label="超出运费"></el-table-column>
				<el-table-column prop="code" label="发货类型">
					<template slot-scope="scope">
						<div>{{ ['正常', '不发货地区'][scope.row.code] }}</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button size="mini" type="text" icon="el-icon-delete" class="red"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 编辑/添加弹出框 -->
		<el-dialog :title="type ? '编辑' : '添加'" :visible.sync="editVisible" width="30%">
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="模版名称">
					<el-select v-model="form.freight" @change="getData" placeholder="请选择模版名称" size="small" class="mr10">
						<el-option v-for="(item, index) in options" :key="item.ID" :label="item.name"
							:value="item.ID"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="省">
					<el-select v-model="form.province" placeholder="请选择省" size="small" class="mr10">
						<el-option v-for="(item, index) in provincelist" :key="item.name" :label="item.name"
							:value="item.name"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="数量"><el-input v-model="form.number"></el-input></el-form-item>
				<el-form-item label="运费"><el-input v-model="form.money"></el-input></el-form-item>
				<el-form-item label="超出运费"><el-input v-model="form.far_money"></el-input></el-form-item>
				<el-form-item label="发货类型">
					<el-select v-model="form.code" placeholder="请选择类型" size="small" class="mr10">
						<el-option v-for="(item, index) in fhoptions" :key="index" :label="item.label"
							:value="item.value"></el-option>
					</el-select></el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import provinces from '@/assets/JSON/provinces.json'
export default {
	name: 'freight',
	data() {
		return {
			fhoptions: [{
				value: 0,
				label: '正常'
			}, {
				value: 1,
				label: '不发货地区'
			},],
			options: [], // 下拉选项
			freight: '',
			form: {
				freight: '',
				province: '',
				money: '',
				far_money: "",
				number: '',
				code: 0,
			},
			query: {
				pageIndex: 1,
				pageSize: 20
			},
			upimg: {
				token: '',
				key: new Date().valueOf()
			},
			code: 0,
			upload: '',
			tableData: [],
			multipleSelection: [],
			editVisible: false,
			pageTotal: 0,
			provincelist: provinces,
			type: 0,
			loading: false
		};
	},
	created() {
		this.request('admin/freightTemplate/', 'get', { page: 1, size: 50 }).then(res => {
			this.options = res.data.data
			this.freight = res.data.data[0].ID
			this.getData()
		})
	},
	methods: {

		//获取数据
		getData() {
			this.loading = true
			this.request('admin/freight/', 'get', { page: this.query.pageIndex, size: this.query.pageSize, freight: this.freight }).then(res => {
				console.log(res)
				this.tableData = res.data.data
				this.pageTotal = res.data.total
			})
			this.loading = false
		},
		// 编辑
		handleEdit(e) {
			this.editVisible = true;
			this.form = e;
			this.imageUrl = e.img;
			this.type = 1
		},
		cancel() {
			this.editVisible = false;
			this.form = {
				freight: '',
				province: '',
				money: '',
				code: 0,
			};
			this.getData();
		},
		// 修改排序
		operations(e, code) {
			console.log(e)
			e.sort = Number(e.sort)
			console.log(e)
			this.request('admin/freightTemplate/', 'put', e).then(res => {
				if (res.errno == 0) {
					this.$message.success(res.errmsg);
					this.getData()
				} else {
					this.$message.error(res.errmsg);
				}
			});
			this.editVisible = false;
			this.getData();
		},
		// 删除操作
		handleDelete(index, row) {
			// 二次确认删除
			this.$confirm('确定要删除吗？', '提示', {
				type: 'warning'
			})
				.then(() => {
					this.request('admin/freight/', 'delete', { id: row.ID }).then(res => {
						if (res.errno == 0) {
							this.$message.success(res.errmsg);
							this.tableData.splice(index, 1)
							this.getData()
						} else {
							this.$message.error(res.errmsg);
						}
					});
				})
		},
		// 多选操作
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		// 添加
		addregion() {
			this.form = {
				freight: '',
				province: '',
				money: '',
				code: 0,
			};
			this.type = 0
			this.imageUrl = '';
			this.editVisible = true;
		},

		// 添加/修改
		saveEdit() {

			if (!this.form.freight) return this.$message.error('请选择模版');
			if (!this.form.province) return this.$message.error('请选择省');
			if (this.form.money < 0) return this.$message.error('运费要大于等于0');
			if (this.form.number < 0) return this.$message.error('数量要大于等于0');
			this.form.far_money = Number(this.form.far_money)
			this.form.number = Number(this.form.number)
			this.form.money = Number(this.form.money)

			this.request('admin/freight/', this.type == 0 ? 'post' : 'put', this.form).then(res => {
				if (res.errno == 0) {
					this.$message.success(res.errmsg);
					this.form = {
						freight: '',
						province: '',
						money: '',
						far_money: "",
						number: '',
						code: 0
					};
				} else {
					this.$message.error(res.errmsg);
				}
				this.getData();
			});
			this.editVisible = false;
		},
		// 分页导航
		handlePageChange(val) {
			this.$set(this.query, 'pageIndex', val);
			this.getData();
		}
	}
};
</script>

<style scoped>
.container {
	padding: 20px;
}

.el-upload--text {
	width: 200px !important;
}

.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;

	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	/* width: 100px; */
	height: 100px;
	line-height: 100px;
	text-align: center;
}

.avatar {
	width: 100%;
	height: 178px;
	display: block;
}

.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
	display: inline-block;
}

.table {
	width: 100%;
	font-size: 14px;
}

.red {
	color: #ff0000;
}

.mr10 {
	margin-right: 10px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 60px;
	height: 60px;

	.el-image img {
		object-fit: cover;
	}
}

/* 设置分页按钮样式 */
.pagination {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
}
/* 使用 /deep/ 或 >>> 来穿透 scoped 样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #f2f2f2;
  /* 设置表头颜色 */
  color: #333;
  /* 设置表头文字颜色 */
}
</style>
